<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title th:text="${'文本差异对比-'+title}">文本差异对比</title>
    <link rel="icon" href="/favicon.svg" type="image/x-icon">
    <link rel=stylesheet th:href="${public_cdn + '/codemirror/4.9.0/codemirror.min.css'}">
    <link rel=stylesheet th:href="${public_cdn + '/codemirror/4.9.0/addon/merge/merge.min.css'}">
    <style>
        .CodeMirror {
            line-height: 1.3;
            font-size: 14px;
        }

        .CodeMirror-merge-gap {
            height: 97vh;
        }
    </style>
</head>
<body onload="initUI()">

<div id="view"></div>

<script th:src="${public_cdn + '/codemirror/4.9.0/codemirror.min.js'}"></script>
<script th:src="${public_cdn + '/diff_match_patch/20121119/diff_match_patch.js'}"></script>
<script th:src="${public_cdn + '/codemirror/4.9.0/addon/merge/merge.min.js'}"></script>
<script type="text/javascript">
    function initUI() {
        let target = document.getElementById("view");
        target.innerHTML = "";
        let mv = CodeMirror.MergeView(target, {
            value: "左侧待对比文本",
            orig: "右侧待对比文本",
            lineNumbers: true,
            highlightDifferences: true,
            collapseIdentical: false,
            allowEditingOriginals: true
        });

        let height = "97vh";
        if (mv.leftOriginal()) {
            mv.leftOriginal().setSize(null, height);
        }
        mv.editor().setSize(null, height);
        if (mv.rightOriginal()) {
            mv.rightOriginal().setSize(null, height);
        }
        mv.wrap.style.height = height;
    }
</script>
</body>
</html>
